<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let a, i;
        for (i = 0; i < 10; i++) {
            a = document.createElement('a');
            a.innerHTML = i + '<br>'
            a.addEventListener('click', function (e) {
                e.preventDefault();
                alert(i); // 不管点击什么都弹出10
                //因为i是在全局作用域中，点击时循环已经结束，所以此时i=102
            })
            document.body.appendChild(a);
        }

        // 创建10个`<a>`标签，点击的时候弹出对应的序号
        let a;
        for (let i = 0; i < 10; i++) {
            a = document.createElement('a');
            a.innerHTML = i + '<br>'
            a.addEventListener('click', function (e) {
                e.preventDefault();
                alert(i); // 正常弹出
                // 此时i是在块级作用域中，每次i执行的时候都会生成一个新的块，所以就会有不同的块
            })
            document.body.appendChild(a);
        }
    </script>
</body>

</html>